
<template>
  <div class="mine">
    <div class="p-w-sm">
      <div>
        <h2 ><span  class="title">963333</span> <span class="t"> 电梯编码 ({{eleinfo.eleFlag}})</span></h2>
      </div>
    </div>
    <div class="card">

      <el-card class="colr-gray box-card ">
        <el-row class="el-row--flex row_box">
          <el-col class="lf_box" :span="6">设备代码</el-col>
          <el-col class="lr_box" :span="18"> {{eleinfo.eleCode}}</el-col>
        </el-row>
        <el-row class="el-row--flex row_box diver">
        </el-row>
        <el-row class="el-row--flex row_box">
          <el-col class="lf_box">使用登记证号</el-col>
          <el-col class="lr_box"> {{eleinfo.eleCertNo}}</el-col>
        </el-row>
        <el-row class="el-row--flex row_box diver">
        </el-row>
        <el-row class="el-row--flex row_box">
          <el-col class="lf_box">电梯区域</el-col>
          <el-col class="lr_box"> {{eleinfo.eleAreaName}}</el-col>
        </el-row>
        <el-row class="el-row--flex row_box diver">
        </el-row>
<!--        <el-row class="el-row&#45;&#45;flex row_box">-->
<!--          <el-col class="lf_box">检验有效期</el-col>-->
<!--          <el-col class="lr_box"> {{eleinfo.eleFlag}}</el-col>-->
<!--        </el-row>-->
<!--        <el-row class="el-row&#45;&#45;flex row_box diver">-->
<!--        </el-row>-->
        <el-row class="el-row--flex row_box">
          <el-col class="lf_box">下次检验时间</el-col>
          <el-col class="lr_box"> {{eleinfo.eleNextChecktime}}</el-col>
        </el-row>
        <el-row class="el-row--flex row_box diver">
        </el-row>
        <el-row class="el-row--flex row_box">
          <el-col class="lf_box">维保单位24小时电话</el-col>
          <el-col class="lr_box"> {{eleinfo.maintRescuePhone}}</el-col>
        </el-row>
        <el-row class="el-row--flex row_box diver">
        </el-row>
        <el-row class="el-row--flex row_box">
          <el-col class="lf_box" :span="6">电梯地址</el-col>
          <el-col class="lr_box" :span="18"> {{eleinfo.eleUseCommunity}}</el-col>
        </el-row>
      </el-card>

      <el-card class="box-card colr-blue pd_tp10" >
        <el-col :span="6">
          <img src="@/assets/home/wbdw.png" height="60" width="60"/>
        </el-col>
        <el-col :span="18">
          <el-row>
            维保单位
          </el-row>
          <el-row>
            {{eleinfo.maintOrgName}}
          </el-row>
          <el-row>
            维保单位电话：{{eleinfo.maintOrgTel}}
          </el-row>
        </el-col>
      </el-card>

      <el-card class="box-card colr-blue pd_tp10">
        <div slot="header" class="clearfix">
          <span>维保详情</span>
<!--          <el-button style="float: right; padding: 3px 0" v-if="taskinfo" type="text">展开</el-button>-->
        </div>
        <el-row v-show="!taskinfo" style=" font-size: 16px; text-align: center">无维保信息</el-row>
        <div v-show="eleMaintTaskBaseInfo.planName" >
          <el-row class="el-row--flex row_box">
            <el-col class="lf_box" :span="6">保养名称</el-col>
            <el-col class="lr_box" :span="18"> {{eleMaintTaskBaseInfo.planName.replace("计划","")}}</el-col>
          </el-row>
          <el-row class="el-row--flex row_box diver">
          </el-row>
          <el-row class="el-row--flex row_box">
            <el-col class="lf_box" :span="8">保养时间</el-col>
            <el-col class="lr_box" :span="16"> {{eleMaintTaskBaseInfo.planStartTime.substring(0,10)}}</el-col>
          </el-row>
          <el-row class="el-row--flex row_box diver">
          </el-row>
          <el-row class="el-row--flex row_box">
            <el-col class="lf_box" :span="6">维保负责人</el-col>
            <el-col class="lr_box" :span="18"> {{eleMaintTaskBaseInfo.maintWorkerCharge}}</el-col>
          </el-row>
          <el-row class="el-row--flex row_box diver">
          </el-row>
          <el-row class="el-row--flex row_box">
            <el-col class="lf_box" :span="6">电话</el-col>
            <el-col class="lr_box" :span="18"> {{eleMaintTaskBaseInfo.phonenumber}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="7" v-for="(img,index) in imgs" :key="index">
              <img :src="img" height="70" width="70"/>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card colr-deep-gray pd_tp10">
        <el-col :span="6">
          <img src="@/assets/home/sydw.png" height="60" width="60"/>
        </el-col>
        <el-col :span="18">
          <el-row>
            使用单位
          </el-row>
          <el-row>
            {{eleinfo.useOrgName}}
          </el-row>
          <el-row>
            使用单位电话：{{eleinfo.useOrgTel}}
          </el-row>
        </el-col>
      </el-card>

      <el-card class="box-card colr-green pd_tp10">
       <el-row style=" font-size: 16px; color: #0bb5f0; ">温馨提示:</el-row>
        <el-row style="margin-left: 10px;">电梯故障时,可通过以下方式求助</el-row>
        <el-row style="margin-left: 10px;">1、按电梯紧急呼叫按钮</el-row>
        <el-row style="margin-left: 10px;">2、拨打电梯维保电话</el-row>
        <el-row style="margin-left: 10px;">3、拨打应急救援电话963333，报电梯编号。</el-row>
      </el-card>

      </div>
  </div>
</template>

<script>

import {getAdminEleInfoDetail} from "@/api/elevator";

export default {
  data() {
    return {
      fileIP:this.$util.fileIP,
      eleinfo: {},
      taskinfo: {},
      eleMaintTaskBaseInfo:{},
      eleFlag:'',
      eleCode:"",
      imgs:[],
    }
  },
  components: {
  },
  mounted () {
    this.eleFlag=this.$route.query.eleFlag
    this.eleCode=this.$route.query.eleCode
    if(!this.eleFlag&&!this.eleCode){
      this.eleFlag='0'
    }
    this.getEleInfo()
  },
  methods: {
    getEleInfo () {
      const query = {
        eleFlag: this.eleFlag,
        eleCode: this.eleCode,
      }
      getAdminEleInfoDetail(query).then(res => {
        if (res.data.code == '200') {
          console.log(res)
          this.eleinfo = res.data.data.eleBaseInfo
          this.taskinfo = res.data.data.taskRecord
          this.eleMaintTaskBaseInfo=this.taskinfo.eleMaintTaskBaseInfo
          if(!this.eleMaintTaskBaseInfo){
            this.eleMaintTaskBaseInfo={};
            this.eleMaintTaskBaseInfo.planName=""
            this.eleMaintTaskBaseInfo.planStartTime=""
          }else{
            for(let i=0;i<this.taskinfo.page.list.length;i++){
              let res1=this.taskinfo.page.list[i];
              if(res1.checkImgurl){
                this.imgs.push(this.fileIP+res1.checkImgurl)
                if(this.imgs.length>3){
                  break;
                }
              }
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.title{
  margin-top: 5px;
  color: #f88b51;
  text-align: left;
  margin-bottom: 5px;
}

.t {
  color: #000;
  font-size: 17px;
  font-weight: 400;
}

.colr-gray{
  background-color: #d0cdcd;
}

.colr-deep-gray{
  background-color: #c2bebe;
}

.colr-blue{
  background-color: rgb(225, 220, 246);
}


.colr-green{
  background-color: #ddebd5;
}


.pd_tp10{
  padding-top: 10px;
  padding-bottom: 10px;
}


.diver{
  background-color: #000;
  height: 1px;
}

.row_box{
  margin-top: 5px;
  margin-bottom: 5px;
}

.lf_box{
  text-align: left;
  margin-left: 5px;
}
.lr_box{
  text-align: right;
  margin-right: 5px;
}



.mine {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .banner {
    width: 100%;
    height: 130px;
    padding-top: 20px;
    img {
      width: 100%;
    }
  }

  .p-w-sm{
    margin-left: 10px;
    margin-top: 5px;
  }

  .appInfoDiv {
    padding: 3px;
    padding-bottom: 10px;
    margin: 5px 0;
    .appInfo {
      //background: linear-gradient(
      //    to bottom,
      //    rgba($color: $lightGreen, $alpha: 0.8) 0%,
      //    rgba($color: $darkGreen, $alpha: 0.8) 100%
      //);
      background: #FFFFFF;
      color: #c3c3c3;
      border-radius: 10px;
      padding-bottom: 1px;
      //box-shadow: 0px 3px 3px rgba($color: $darkGreen, $alpha: 0.5),
      //0px -3px 3px rgba($color: $agriTheme, $alpha: 0.5),
      //3px 0px 3px rgba($color: $darkGreen, $alpha: 0.5), -3px 0px 3px $darkGreen;
      font-family: 'Times New Roman', Times, serif;
      margin-bottom: 10px;
    }
    h2 {
      font-weight: 500;
      margin-bottom: 20px;
      border-bottom: 1px solid #fff;
      line-height: 45px;
      text-indent: 20px;
    }
    p {
      text-indent: 40px;
      font-size: 16px;
      margin-bottom: 30px;
      i {
        margin-right: 10px;
      }
    }
  }
}
::v-deep {
  .van-button--info {
    background-color: #00b39b;
    border-color: #00b39b;
  }
}


.card {
  justify-content: space-between;
  height: auto;
  .box-card {
    margin-top: 5px;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 10px;
    width: auto;
    .clearfix {
      color: #333;
      font-weight: bold;
    }
    ::v-deep .el-card__body {
      padding: 10px 20px;
    }
    ::v-deep .el-card__header{
      padding: 5px 20px;
    }
    .t1 {
      color: #000;
      font-size: 18px;
      cursor: pointer;
      background: #f0f0f0;
      margin: 5px 5px 5px 5px;
      //display: flex;
      justify-content: space-between;
      line-height: 30px;
      // .mark{
      //   float: right;
      // }
      ::v-deep .el-badge__content {
        margin-bottom: 10px;
      }
      .number{
        font-weight: bold;
        color: #2db7f5;
      }
    }
  }
}
</style>
